<template>
	<view class="cu-card custom-card-short grid col-2 padding-lr-xs">
		<block v-for="(item,index) of list" :key="index">
			<view class="content-list padding-lr-xs padding-bottom-sm" @click="showDetail(item.video.id)">
				<view class="content-item bg-white">
					<view class="img-box-bg">
						<image :src="item.video.img" mode="aspectFill" style="height:100%"/>
					</view>
					<view class="bg-shadeBottom custom padding-lr-sm padding-bottom padding-top-xl flex flex-direction justify-between">
						<view class="text-sm text-cut" style="min-width: 0;">{{item.video.title}}</view>
						<view class="flex justify-between align-center margin-top-sm text-xs">
							<view class="flex justify-start align-center">
								<image class="cu-avatar custom round margin-right-xs" :src="item.video.avatar"/>
								<view>{{item.video.nickname}}</view>
							</view>
							<view class="flex justify-start align-center">
								<view class="margin-left-xs">{{item.video.views_count}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default{
		props:{
			list:{
				type:Array,
				default:()=>([])
			},
			type:{
				type:String,
				default:"user"
			}
		},
		methods:{
			showDetail(id){
				if(this.type==="user"){
					this.$h.router.push({
						path: "/pages/video/videoDetail",
						params: {
							id
						}
					})
				}else{
					this.$h.router.push({
						path: "/pages/video/adminVideo/videoDetail",
						params: {
							id
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cu-card {
		padding-top: 20rpx;
	
		.cu-item.custom-margin {
			margin: 20rpx;
			overflow: hidden;
		}
	}

	.content-list {
		height: 520rpx;
	
		.content-item {
			width: 100%;
			height: 100%;
			border-radius: 14rpx;
			overflow: hidden;
			position: relative;
	
			.cu-avatar.custom {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
	
	.cu-card.custom-card-short,
	.cu-card.custom-card-live {
		padding-top: 40rpx;
	}
</style>
